<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Main</title>
    <script th:src="@{/js/jquery-2.1.1.js}"></script>
</head>
<body>

<div style="margin: 100px 300px;width: 800px;height: 450px;border: 1px solid #929292;border-radius: 5px">
    <div id="userName" style="height: 50px;border-top: 1px solid #929292;line-height: 50px"></div>
    <div style="height: 400px;border-top: 1px solid #929292;display: flex">
        <div id="left" style="border: 1px solid #929292;width: 500px;height: 400px">
            <div id="chatMes"></div>
            <!--消息展示区域-->
            <div style="height: 300px;width: 500px;margin: 8px 10px;" id="main_text">
<!--                <div style="background-color: #929292;float: right;border-radius: 5px">右边</div>-->
<!--                <div style="background-color: #0eef41;float: left;border-radius: 5px;color: #ffffff">左边</div>-->
            </div>
            <div id="sendContent" style="height: 100px;width: 500px;border-top: 1px solid #929292;overflow: hidden">
                <textarea id="context_text"></textarea>
                <button style="float: right" id="submit">发送</button>
            </div>
        </div>
        <div id="right" style="width: 300px;height: 400px;margin-left: 10px">
            <div style="font-weight: bold;font-size: 18px;height: 50px;line-height: 50px">
                在线用户：
            </div>
            <div style="height: 200px;">
                <ul style="color: #00ccdd" id="userList">
<!--                    <li>张三</li>-->
<!--                    <li>李思</li>-->
                </ul>
            </div>
            系统广播：
            <div style="height: 150px;border: 1px solid #929292;" id="systemMessage">
                <ul style="color: #00ccdd" id="broadcastList">
<!--                    <li>张三</li>-->
<!--                    <li>李思</li>-->
                </ul>
            </div>
        </div>
    </div>
</div>


</body>
<script>
    var toName;
    var username;

    function showChat(name) {
        toName = name
        $("#chatMes").html("正在和 <font>" +toName+ "</font> 聊天")

        //清空聊天框
        $("#main_text").html("")

        //从sessionStorage中获取正在聊天的消息
        var chatData = sessionStorage.getItem(toName);
        if (chatData != null) {
            //将聊天记录渲染出来
            $("#main_text").html(chatData)
        }
    }


    $(function () {
        $.ajax({
            type: "get",
            url: "/getUsername",
            async:false,
            success: function (res) {
                console.log(res)
                username = res
                //显示在线
                $("#userName").html("用户 " + res + "<span style='float: right;color: #00ccdd'>在线</span>")
            }
        })

        //创建websocket对象
        var ws = new WebSocket("ws://localhost:8086/chat")
        //给ws绑定事件
        ws.onopen = function () {
            //在建立连接后需要做什么事
            //显示在线
            $("#userName").html("用户 " + username + "<span style='float: right;color: #00ccdd'>在线</span>")


        }
        //接收到服务端推送的消息后触发
        ws.onmessage = function (evt) {
            var dataStr = evt.data
            //将dataStr转换为json对象
            var res = JSON.parse(dataStr)
            //判断是否是系统消息
            if (res.system) {
                var names = res.message
                //系统消息
                //1、好友列表展示

                //2、系统广播的展示
                var userListStr = ""
                var broadcastListStr = ""
                for (var name of names) {
                    if (name != username) {
                        userListStr += "<li><a onclick='showChat(\""+name+"\")'>"+name+"</a></li>"
                        broadcastListStr += "<li style='color: #9d9d9d;'>用户 "+name+" 已上线</li>"
                    }
                }
                console.log(userListStr)
                console.log(broadcastListStr)
                //渲染好友列表和系统广播
                $("#userList").html(userListStr)
                $("#broadcastList").html(broadcastListStr)

            }else {
                //非系统消息
                //将服务端推送过来的消息进行展示
                var str = "<div style=\"background-color: #0eef41;float: left;border-radius: 5px;color: #ffffff\">" +res.message+ "</div>"
                if (toName == res.fromName) {
                    //将消息追加进去
                    $("#main_text").append(str)
                }

                //将聊天消息存储在sessionStorage中
                var chatDate = sessionStorage.getItem(res.fromName)
                if (chatDate != null) {
                    str = chatDate + str
                }
                sessionStorage.setItem(res.fromName,str)

            }
        }
        ws.onerror = function () {

        }
        ws.onclose = function () {
            $("#userName").html("用户 " + username + "<span style='float: right;color: red'>离线</span>")
        }

        $("#submit").click(function () {
            //获取输入的数据
            var data = $("#context_text").val()
            //清空输入框
            $("#context_text").val("")
            //拼接json
            var json = {"toName":toName,"message":data}

            //将数据展示在聊天框
            var str = "<div style=\"background-color: #929292;float: right;border-radius: 5px\">" +data+ "</div>"
            $("#main_text").append(str)

            //将聊天消息存储在sessionStorage中
            var chatDate = sessionStorage.getItem(toName)
            if (chatDate != null) {
                str = chatDate + str
            }
            sessionStorage.setItem(toName,str)
            //发送数据给服务端
            ws.send(JSON.stringify(json))
        })




    })

</script>
</html>